<template>
  <div class="activity-management">
    <div class="card">
      <div class="card-header">
        <h2>活动管理</h2>
        <button class="btn-add" @click="showAddDialog">
          <i class="icon-plus"></i> 发布活动
        </button>
      </div>

      <div class="table-container">
        <table>
          <thead>
          <tr>
            <th>活动ID</th>
            <th>活动名称</th>
            <th>开始时间</th>
            <th>结束时间</th>
            <th>状态</th>
            <th>操作</th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="activity in activities" :key="activity.aid">
            <td>{{ activity.aid }}</td>
            <td>{{ activity.title }}</td>
            <td>{{ $formatDate(activity.startTime) }}</td>
            <td>{{ $formatDate(activity.endTime) }}</td>
            <td>
                <span :class="['status',
                  {'ongoing': isOngoing(activity)},
                  {'upcoming': isUpcoming(activity)},
                  {'ended': isEnded(activity)}
                ]">
                  {{ getActivityStatus(activity) }}
                </span>
            </td>
            <td>
              <button class="btn-edit" @click="editActivity(activity)">
                <i class="icon-edit"></i>
              </button>
              <button class="btn-delete" @click="deleteActivity(activity.aid)">
                <i class="icon-trash"></i>
              </button>
            </td>
          </tr>
          </tbody>
        </table>
      </div>

      <!-- 添加/编辑活动对话框 -->
      <div class="dialog-overlay" v-if="showActivityDialog">
        <div class="dialog">
          <h3>{{ isEditing ? '编辑活动' : '发布新活动' }}</h3>
          <div class="form-group">
            <label>活动标题</label>
            <input type="text" v-model="currentActivity.title">
          </div>
          <div class="form-group">
            <label>活动描述</label>
            <textarea v-model="currentActivity.description"></textarea>
          </div>
          <div class="form-row">
            <div class="form-group">
              <label>开始时间</label>
              <input type="datetime-local" v-model="currentActivity.startTime">
            </div>
            <div class="form-group">
              <label>结束时间</label>
              <input type="datetime-local" v-model="currentActivity.endTime">
            </div>
          </div>
          <div class="form-group">
            <label>活动封面URL</label>
            <input type="text" v-model="currentActivity.coverImage">
          </div>
          <div class="dialog-actions">
            <button class="btn-cancel" @click="cancelActivity">取消</button>
            <button class="btn-confirm" @click="saveActivity">
              {{ isEditing ? '保存' : '发布' }}
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { format, parseISO } from 'date-fns';

export default {
  name: 'ActivityManagement',
  data() {
    return {
      activities: [],
      showActivityDialog: false,
      isEditing: false,
      currentActivity: {
        aid: null,
        title: '',
        description: '',
        startTime: '',
        endTime: '',
        coverImage: ''
      }
    }
  },
  created() {
    this.fetchActivities();
  },
  // 修改ActivityManagement.vue中的方法
  methods: {
    // 判断活动是否未开始
    isUpcoming(activity) {
      const now = new Date();
      const start = new Date(activity.startTime);
      return now < start;
    },

    // 判断活动是否进行中
    isOngoing(activity) {
      const now = new Date();
      const start = new Date(activity.startTime);
      const end = new Date(activity.endTime);
      return now >= start && now <= end;
    },

    // 判断活动是否已结束
    isEnded(activity) {
      const now = new Date();
      const end = new Date(activity.endTime);
      return now > end;
    },

    // 获取活动状态文本
    getActivityStatus(activity) {
      if (this.isUpcoming(activity)) return '未开始';
      if (this.isOngoing(activity)) return '进行中';
      return '已结束';
    },

    async fetchActivities() {
      try {
        const response = await this.$http.get('/admin/allActivity')
        this.activities = response.data // 注意访问response.data
      } catch (error) {
        console.error('获取活动列表失败:', error)
        this.$message.error('获取活动列表失败')
      }
    },

    async saveActivity() {
      try {
        if (this.isEditing) {
          // 后端没有更新活动的接口
          this.$message.warning('更新活动功能需要后端支持')
        } else {
          await this.$http.post('/admin/publishActivity', this.currentActivity)
          this.$message.success('活动发布成功')
        }
        this.showActivityDialog = false
        this.fetchActivities()
      } catch (error) {
        console.error('保存活动失败:', error)
        this.$message.error('保存活动失败')
      }
    },

    async deleteActivity(aid) {
      if (confirm('确定要删除此活动吗？')) {
        try {
          await this.$http.post('/admin/deleteActivity', null, {
            params: { id: aid }
          })
          this.fetchActivities()
          this.$message.success('活动删除成功')
        } catch (error) {
          console.error('删除活动失败:', error)
          this.$message.error('删除活动失败')
        }
      }
    }
  }
}
</script>
import { ElMessage } from 'element-plus'

<style scoped>
.activity-management {
  padding: 20px;
}

.btn-add {
  padding: 8px 16px;
  background-color: #1976d2;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.btn-add i {
  margin-right: 5px;
}

.status {
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  color: white;
}

.status.ongoing {
  background-color: #4caf50;
}

.status.upcoming {
  background-color: #2196f3;
}

.status.ended {
  background-color: #9e9e9e;
}

.btn-edit, .btn-delete {
  padding: 6px 10px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-right: 5px;
}

.btn-edit {
  background-color: #ffc107;
  color: white;
}

.btn-delete {
  background-color: #f44336;
  color: white;
}

.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  color: #607d8b;
  font-weight: 500;
}

.form-group input, .form-group textarea {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
}

.form-group textarea {
  height: 100px;
  resize: vertical;
}

.form-row {
  display: flex;
  gap: 15px;
}

.form-row .form-group {
  flex: 1;
}
</style>